<template>
	<view>
		<view class="time">
			<view class="list-item">
				<text class="sel-date" :class="timeData.dateIndex == index?'sel-date-active':''"
				 v-for="(item,index) in timeData.dateList" @tap="changeTime(index)" :key="index">{{item}}</text>
			</view>
		</view>
		<view class="warp">
			<scroll-view  scroll-x="true" style="width: 100%;overflow: hidden;word-wrap:break-all">
		        <view class="scroll-view_H">	
						<t-table @change="change">
							<t-tr>
								<t-th v-for="(item,index) in thData" :key="index">{{item.title}}</t-th>
							</t-tr>
							<t-tr v-for="(item,index) in contentData" :key="index">
								<t-td v-for="(c_item,c_index) in item" :key="c_index">
									<image class="headimg" :src="c_item.image" v-if="c_item.type == 'join_user'">
									<text class="file_color" @tap="showFile(c_item)"
										v-if="c_item.type == 'image' || c_item.type == 'video' || c_item.type == 'qianming' || c_item.type == 'file'">{{c_item.title}}</text>
									<text v-else>{{c_item.title}}</text>
								</t-td>
								
							</t-tr>
						</t-table>
					
					
		        </view>
			</scroll-view>
		</view>
		<view class="show-video" v-show="showVideoStatus == true" >
			<view class="mask-show" @tap.stop="closeVideo"></view>
			<view class="video">
				<video class="myVideo" id="myVideo" :src="showVideoSrc" v-if="showVideoSrc" controls @error="videoErrorCallback"></video>
			</view>
		</view>
		<mx-date-picker :show="mxDatePicker.showPicker" :type="mxDatePicker.type" :showSeconds="false" :value="mxDatePicker.value" :show-tips="true"
		:show-seconds="true" @confirm="DatePickerEnd" @cancel="DatePickerEnd" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			MxDatePicker
		},
		data() {
			return {
				s_id:0,
				thData:[],
				contentData:[],
				videoContext:'',
				showVideoStatus:false,
				showVideoSrc:'',
				mxDatePicker:{
					showPicker: false,
					type: 'range',
					start_time: '',
					end_time:'',
				},
				timeData:{
					dateIndex:1,
					dateList:['全部','今天','昨天','选择日期'],
				}
			}
		},
		methods: {
			changeTime(index){
				if(index == 3)
				{
					this.mxDatePicker.showPicker = true;
					var time = [];
					var start_time = this.mxDatePicker.start_time;
					var end_time = this.mxDatePicker.end_time;
					if(start_time)
					{
						time.push(start_time)
					}
					if(end_time)
					{
						time.push(end_time)
					}
					this.mxDatePicker.value = time;
				}else{
					if(index == this.timeData.dateIndex)
					{
						return ;
					}
					this.timeData.dateIndex = index;
					this.getJoinTableList();
					//this.getDetailJoinUserName(index);
					
				}
			},
			DatePickerEnd(e) {//选择
				this.mxDatePicker.showPicker = false;
				if(e) {
					this.mxDatePicker.start_time = e.value[0];
					this.mxDatePicker.end_time = e.value[1];
					this.timeData.dateIndex = 3;
					this.timeData.dateList[3] = e.value.join('至');
					this.getJoinTableList();
				}
			},
			getJoinTableList(){
				var that = this;
				var timeIndex = this.timeData.dateIndex;
				if(timeIndex == 3)
				{
					var start_time = this.mxDatePicker.start_time;
					var end_time = this.mxDatePicker.end_time;
				}else{
					var start_time = '';
					var end_time = '';
				}
				that.$http.post('statistics/getJoinTableList',{
					s_id:that.s_id,
					timeType:timeIndex,
					time:[start_time,end_time]
				}).then(res=>{
					if(res.code == 1){
						that.thData = res.data.thData;
						that.contentData = res.data.returnData;
					}else{
						that.$api.msg(res.msg);
						that.thData = [];
						that.contentData = [];
					}
				})
			},
			showFile(item){
				var that = this;
				if(item.type == 'image' || item.type == 'qianming')
				{
					that.$api.showImage(item.fileList);
				}else if(item.type == 'video')
				{
					if(item.fileList[0])
					{
						if(that.showVideoSrc !=  item.fileList[0])
						{
							that.showVideoSrc = item.fileList[0];
						}
						that.showVideoStatus = true;
						setTimeout(function(){
							that.videoContext.play();
						},100)
					}else{
						that.$api.msg('未获取到视频链接');
					}
				}else if(item.type == 'file')
				{
					if(item.fileList)
					{
						that.$api.openFile(item.fileList);
					}else{
						that.$api.msg('缺少文件地址');
					}
				}
			},
			closeVideo(){
				this.showVideoStatus = false;
				this.videoContext.pause();
			},
			videoErrorCallback(){
				this.$api.msg('加载视频失败');
			}
		},
		onLoad(params){
			//params.s_id = 17;
			if(params.s_id)
			{
				this.s_id = params.s_id;
				this.getJoinTableList();
			}
			this.videoContext = uni.createVideoContext('myVideo')
		}
	}
</script>

<style lang="scss">
.time{
	padding-left: 20rpx;
	.list-item{
		.sel-date{
			display: inline-block;
			height: 30rpx;
			padding: 10rpx 20rpx;
			background: #eeeeee;
			color: #999999;
			border-radius: 30rpx;
			line-height: 30rpx;
			font-size: 26rpx;
			text-align: center;
			margin: 20rpx 20rpx 20rpx 0;
		}
		.sel-date-active{
			background: $uni-btn-color;
			color: #FFFFFF;
		}
	}
}
.scroll-view_H{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
 }
 .headimg{
 	width: 50rpx;
 	height: 50rpx;
 	border-radius: 50%;
 }
 .file_color{
	 color: #825da5;
 }
 .show-video{
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 .video{
		 z-index: 101;
		 position: absolute;
		 top: 25%;
		 left: 0;
		 width: 100%;
	 	.myVideo{
			width: 96%;
			height: 400rpx;
			margin: 0 2%;
			border-radius: 10rpx;
	 	}
	 }
 }
 
</style>
